import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { itemGroupDefaultProps } from './defaultProps';
import type { ItemGroupOptions } from './type';

export interface ItemGroupProps extends ItemGroupOptions, HTMLAttributes<HTMLDivElement> {}

const ItemGroup: FC<ItemGroupProps> = (props) => {
  const { className, divided, unstackable, relaxed, link, inverted, children, forwardedRef, ...itemGroupProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames('ui', { divided, unstackable, link, inverted }, relaxed, { relaxed }, 'items', className),
      ...itemGroupProps,
    },
    children,
  );
};

ItemGroup.displayName = 'ItemGroup';
ItemGroup.defaultProps = itemGroupDefaultProps;

export default ItemGroup;
